<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../../lib/svg/1.0.0-rc.9/svg.js"></script>
</head>
<body>
<svg id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
<script type="text/javascript">
    // create svg drawing
    var draw = SVG('drawing')

    // create image
    var image = draw.image('images/shade.jpg')
    image.size(600, 600).y(-150)

    // create text
    var text = draw.text('SVG.JS').move(300, 0)
    text.font({
        family: 'Source Sans Pro'
        , size: 180
        , anchor: 'middle'
        , leading: 1
    })

    // clip image with text
    image.clipWith(text)
</script>
</body>
</html>